<template>
  <div class="trend">
    <div class="text" :style="{color: textColor, fontSize: fontSize}">
      <slot v-if="slots.default"></slot>
      <div v-else >{{text}}</div>
    </div>
    <div class="icon">
      <component :is="`el-icon-${toLine(iconTag)}`" :style="{color: iconColorTag, width: iconSize, height: iconSize}"></component>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useSlots, computed } from 'vue'
import { toLine } from '../../../utils'
let props = defineProps({
  // 标记当前趋势是上升(up)还是下降(down)
  // 如果为空,则代表自定义图标
  type: {
    type: String,
    default: ''
  },
  // 图标:
  icon: {
    type: String,
    default: 'arrowup'
  },
  // 图标的颜色
  iconColor: {
    type: String,
    default: ''
  },
  // 趋势显示的文字
  // 1.父组件传递过来的数据, 2.插槽的形式
  text: {
    type: String,
    default: ''
  },
  // 文字的颜色
  textColor: {
    type: String,
    default: '#333333'
  },
  // 文本的字体大小
  fontSize: {
    type: String,
    default: '12px'
  },
  // 图标的尺寸大小
  iconSize: {
    type: String,
    default: '0.8em'
  }
})

// 获取当前组件使用了的插槽
let slots = useSlots()

// 特定图标返回特定标记
let iconTag = computed(() => {
  if(props.type === 'up'){
    return 'arrowup'
  }
  if(props.type === 'down'){
    return 'arrowdown'
  }
  return props.icon
})

// 特定的图标返回特定的颜色
let iconColorTag = computed(() => {
  if(props.type === 'up' && props.iconColor === ''){
    return '#e73f32'
  }
  if(props.type === 'down' && props.iconColor === ''){
    return '#269666'
  }
  return props.iconColor
})
</script>
<style lang="scss" scoped>
.trend {
  display: flex;
  align-items: center;
  .text{
    font-size: 12px;
    margin-right: 4px;
  }
}
.icon{
  svg{
    width: 0.8em;
    height: 0.8em;
  }
}
</style>